<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>portal</title>
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-v1.4.4/themes/metro/easyui.css">
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-v1.4.4/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./jquery-easyui-v1.4.4/demo/demo.css">
	
	<script type="text/javascript" src="./jquery-easyui-v1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="./jquery-easyui-v1.4.4/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="./jquery-easyui-v1.4.4/extension/jquery-easyui-portal/jquery.portal.js"></script>
</head>
<body>
	<div id="xia_pp" style="width:800px;height:700px;">
		<div style="width:33%">
			<div title="Clock" style="text-align:center;background:#f3eeaf;height:150px;padding:5px;">
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100">
			      <param name="movie" value="http://www.respectsoft.com/onlineclock/analog.swf">
			      <param name=quality value=high>
			      <param name="wmode" value="transparent">
			      <embed src="http://www.respectsoft.com/onlineclock/analog.swf" width="100" height="100" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
			    </object>
		    </div>
		</div>
		
		<div style="width:33%;">
			<div title="folder" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
			<ul class="easyui-tree">
				<li>
					<span>folder</span>
					<ul>
						<li>
							<span>folder1</span>
							<ul>
								<li>file1</li>
								<li>file2</li>
								<li>file3</li>
							</ul>
						</li>
						<li>
							<span>folder2</span>
							<ul>
								<li>file1</li>
								<li>file2</li>
								<li>file3</li>
							</ul>
						</li>	
						<li>
							<span>folder3</span>
							<ul>
								<li>file1</li>
								<li>file2</li>
								<li>file3</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
			</div>
		</div>
		<div style="width:33%;">
			<div title="dfsa">
				<table id="xia_datagrid" class="easyui-datagrid" data-options="url:'./read_data.json',method:'get',fitColumns:true,singleSelect:true" style="width: 300px;height:300px">
				    <thead>
				        <tr>
				            <th data-options="field:'card'">卡号</th>
				            <th data-options="field:'name'">姓名</th>
				            <th data-options="field:'time'">时间</th>
				            <th data-options="field:'date'">日</th>
				            <th data-options="field:'month'">月</th>
				            <th data-options="field:'year'">年</th>
				        </tr>
				    </thead>
				</table> 
			</div>
		</div>
	</div>
	<script>
		$(function(){
			$("#xia_pp").portal({
				border:false,
				fit:true
			});

			// create the panel
			var p = $('<div></div>').appendTo('body');
			p.panel({
				title: '这是一个portal',
				height:300,
				closable: true,
				collapsible: true,
				iconCls: "icon-save"
			});
			 
			// add the panel to portal
			$('#xia_pp').portal('add', {
				panel: p,
				columnIndex: 2
			});

		});
	</script>
</body>
</html>